<template>
    <div class="container">
      <br><br>
      <el-button type="primary" @click="handlerAdd">添加物品</el-button>
      <div class="item-table">
            <el-table :data="itemList" style="width: 100%">
            <el-table-column prop="itemId" label="物品编号" width="80" />
            <el-table-column prop="name" label="物品名" width="180" />
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="num" label="库存数量" width="180" />
            <el-table-column prop="vacantNum" label="可调用数量" width="180" />
            <el-table-column  label="操作">
                 <template #default="scope">
                    <el-button size="small" @click="handlerEdit(scope.row)">
                      编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteItem(scope.row.itemId)" >
                      删除
                    </el-button>
                 </template>
            </el-table-column>
          </el-table>
      </div>
       
  
      <!--菜品编辑表格-->
      <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="500"
          >
          
  
           <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="user"
              label-width="auto"
              class="demo-ruleForm"
              :size="formSize"
              status-icon>
              <el-form-item label="物品编号" prop="itemId">
                  <el-input v-model="item.itemid" />
              </el-form-item>
              <el-form-item label="物品名" prop="name">
                  <el-input v-model="item.name" />
              </el-form-item>
              <el-form-item label="物品类型" prop="type">
                  <el-input v-model="item.type" />
              </el-form-item>
              <el-form-item label="物品库存" prop="name">
                  <el-input v-model="item.num" />
              </el-form-item>
              <el-form-item label="可用库存" prop="vacantnum">
                  <el-input v-model="item.vacantnum" />
              </el-form-item>
          </el-form>
  
  
  
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveItem">
                   确定
                </el-button>
              </div>
            </template>
      </el-dialog>
    </div>
  </template>
  
  
  <script setup>
  import { onMounted,ref } from "vue";
  import { ElMessage,ElMessageBox } from 'element-plus'
  
      const dialogTitle = ref('编辑菜品')
  
      //菜品编辑页面是否显示
      const dialogVisible = ref(false)

      //操作类型  add：添加； update:修改
      const optionType = ref('')
  
      const item = ref(
          {
            itemid: "",
            name: "",
            type:"",
            num:"",
            vacantnum:""
        },
      )
  
      const itemList = ref([]);
  
      //保存菜品数据
      const saveItem = () =>{
            let url = "" ;
            let methodName = '' ;
            if(optionType.value == 'add'){
                url ="http://localhost:8282/item/insert?name="+item.value.name+"&type="+item.value.type+"&num="+item.value.num+"&vacantNum="+item.value.vacantnum ;
                methodName = 'get' ;
            }else if(optionType.value == 'edit'){
                url ="http://localhost:8282/item/update?itemId="+item.value.itemid+"&name="+item.value.name+"&type="+item.value.type+"&num="+item.value.num+"&vacantNum="+item.value.vacantnum ;
                methodName = 'get' ;
            }
            console.log(url)
            fetch(url,{
                method:methodName,
                headers:{
                   "Authorization":localStorage.getItem("token")
               }
            })
               .then( res => res.json())
               .then( res => {
                   ElMessage({
                    message: '用户信息修改成功',
                    type: 'success',
                  })
                   dialogVisible.value = false ;
               })
      }
  
      //删除菜品
  
      const deleteItem = itemId =>{
  
           ElMessageBox.confirm(
            '用户删除后不能恢复，是否确认删除?',
            '删除用户',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
               //单击了确认删除按钮
               handlerDel(itemId)
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '取消了操作',
              })
            })
  
      }
      
      const handlerDel = itemId =>{
        let url="http://localhost:8282/item/delete?item_id="+itemId
        console.log(url)
           fetch(url,{
                method:"get",
                headers:{
                   "Authorization":localStorage.getItem("token")
               }        
          })
               .then( res => res.json())
               .then( res => {
                   ElMessage({
                    message: '用户信息删除成功',
                    type: 'success',
                  })
                   selectAllItems();
               })
      }
  
      //编辑菜品
      const handlerEdit = row =>{
          item.value = row
          optionType.value = 'edit'
          dialogTitle.value = '编辑菜品'
          dialogVisible.value = true
      }
  
      //查询所有菜品
      const selectAllItems = () =>{
          fetch("http://localhost:8282/item/findAll",{
              method: 'GET',
              mode: 'cors',
              headers:{
                   "Authorization":localStorage.getItem("token")
               }
          })
               .then( res => res.json())
               .then( res => {
                itemList.value = res.data
               })
      }
  
      //添加菜品
      const handlerAdd = () =>{
          item.value = {}
          optionType.value = 'add'
          dialogTitle.value = '添加用户'
          dialogVisible.value = true ;
      }
  
      //查询数据的函数
      onMounted(() => {
        selectAllItems();
      })
  </script>
  <style scoped>
      .container{
        text-align: center;
      }
  
      table{
          border-collapse: collapse;
          border: 1px solid rgb(8, 8, 8);
          display: inline-block;
      }
  
      .item-table{
         width: 80%;
         margin: 0 auto;
      }
  
  </style>
  